/** 全局变量 已 g- 为前缀 **/

//边框样式，解决1px问题
$g-border-color: #e5e5e5;
$g-border-left-1px: -1px 0 1px -1px $g-border-color;
$g-border-right-1px: 1px 0 1px -1px $g-border-color;
$g-border-top-1px: 0 -1px 1px -1px $g-border-color;
$g-border-bottom-1px: 0 1px 1px -1px $g-border-color;
.g-border-1px {
  box-shadow: $g-border-left-1px,
  $g-border-right-1px,
  $g-border-top-1px,
  $g-border-bottom-1px
}

.g-border-left-1px {
  border-left: none !important;
  box-shadow: $g-border-left-1px;
}

.g-border-right-1px {
  border-right: none !important;
  box-shadow: $g-border-right-1px;
}

.g-border-bottom-1px {
  border-bottom: none !important;
  box-shadow: $g-border-bottom-1px;
}

.g-border-top-1px {
  border-top: none !important;
  box-shadow: $g-border-top-1px;
}

@mixin g-border-bottom-1px {
  @extend .g-border-bottom-1px
}

@mixin g-border-top-1px {
  @extend .g-border-top-1px
}

//组件样式重写
.header-md {
  box-shadow: 0 1px 1px -1px $g-border-color;
  border: none;
  &:after {
    display: none;
  }
  .toolbar-background {
    &.toolbar-background-ios,
    &.toolbar-background-md {
      border: none;
    }
  }
  .bar-buttons-md[end] {
    position: absolute;
    right: 0;
  }
  &.no-border {
    box-shadow: none;
  }
}

//扩展样式

.g-hide {
  display: none;
}

button.g-button {
  box-shadow: none;
  &.activated {
    box-shadow: none;
  }
}

@mixin g-small-title-interface{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleY(0.5);
  width: 60px;
  height: 1px;
}
.g-small-title {
  font-size: 12px;
  font-weight: 400;
  color: map_get($text-colors, tip);
  text-align: center;
  margin: 20px 0;
  span {
    position: relative;
    &:before {
      @include g-small-title-interface;
      background: linear-gradient(to right, #fff, $g-border-color);
      right: calc(100% + 15px);
    }
    &:after {
      @include g-small-title-interface;
      background: linear-gradient(to left, #fff, $g-border-color);
      left: calc(100% + 15px);
    }
  }
}

.g-panel{
  background: #FFFFFF;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: 4px;
  margin: 20px;
  width: calc(100% - 40px);
}
